<template>
  <div>
    <!-- <t-button type="success" icon="icon-handle">成功</t-button>
    <t-row :gutter="20" type="flex" justify="center">
      <t-col :span="6">123</t-col>
      <t-col :span="6">123</t-col>
    </t-row> -->
    <t-calendar
      loading-text="骚等..."
      v-loading="true"
      :loading-spinner="loadingSVG1"
    >
      <template #date-cell="{ date, dateFormated }">
        <div>
          <span>{{ dateFormated }}</span>
        </div>
      </template>
    </t-calendar>
    <!-- <t-carousel
      height="150px"
      :autoplay="true"
      trigger="click"
      ref="carouselRef"
      
    >
      <t-carousel-item>1</t-carousel-item>
      <t-carousel-item>2</t-carousel-item>
      <t-carousel-item>3</t-carousel-item>
      <t-carousel-item>4</t-carousel-item>
    </t-carousel> -->
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { TLoading } from '@MEE/components'

const carouselRef = ref(null)

const loadingSVG1 = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" width="42" height="42">
  <circle cx="21" cy="21" r="5" fill="none" stroke="#5e72e4" stroke-width="2">
    <animate attributeName="r" from="5" to="18" dur="1.5s" repeatCount="indefinite"/>
    <animate attributeName="opacity" from="1" to="0" dur="1.5s" repeatCount="indefinite"/>
  </circle>
  <circle cx="21" cy="21" r="5" fill="none" stroke="#5e72e4" stroke-width="2">
    <animate attributeName="r" from="5" to="18" dur="1.5s" begin="0.5s" repeatCount="indefinite"/>
    <animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0.5s" repeatCount="indefinite"/>
  </circle>
</svg>
`
const loadingSVG2 = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" width="42" height="42">
  <circle cx="21" cy="21" r="18" fill="none" stroke="#5e72e4" stroke-width="3" stroke-dasharray="5,5">
    <animate attributeName="stroke-dashoffset" from="0" to="20" dur="1s" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>
`

onMounted(() => {
  // 可以在这里访问 carouselRef
  const loading = TLoading.service({
    text: '等等等等等等等等等等等等等等',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  setTimeout(() => {
    // loading.close()
  }, 3000)
})
</script>

<style>
.t-carousel-item {
  color: #475669;
  /* opacity: 0.75; */
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.t-carousel-item:nth-child(2n) {
  background-color: #99a9bf;
}

.t-carousel-item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
